<script setup>
import {getCurrentInstance} from "vue";
import IconMessageTip from "@/components/IconMessageTip/index.vue";
import CheckStudent from '@/components/CheckStudent/index.vue'

const props = defineProps({
  surveyData: {
    type: Object,
    default: () => ({})
  }
})
const { proxy } = getCurrentInstance();
const {fed_survey_type } = proxy.useDict('fed_survey_type','fed_survey_state');
const visible = ref(false)

const handleChoseStudent = (data)=>{
  if(data.length === 0){
    return proxy.$modal.msgWarning("请选择人员")
  }
  // 过滤放在surveyData.joinUserList
  data = data.filter(item=>!props.surveyData.joinUserList.includes(item.studentId))
  if(data.length){
    props.surveyData.joinUserList.push(...data.map(item=>item.studentId))
    props.surveyData.joinUserData.push(...data)
  }
  visible.value = false;
}
const delUser = (index)=>{
  props.surveyData.joinUserList.splice(index,1)
  props.surveyData.joinUserData.splice(index,1)
}

</script>

<template>
  <el-tabs type="border-card"  class="flex-tabs">
    <el-tab-pane label="问卷属性">
      <div class="w-full">
        <div class="flex justify-between mb-[10px] border-b-solid border-[#f4f4f4] items-center ">
          <span>问卷封面</span>
          <image-upload :size="60" :is-show-tip="false" v-model="surveyData.coverImg" :limit="1"/>
        </div>
        <div class="mb-[10px] leading-[30px]">
          <div>问卷标题</div>
          <el-input size="small"  v-model="surveyData.surName"></el-input>
        </div>
        <div class="mb-[10px] border-b-solid border-[#f4f4f4]  leading-[30px]">
          <div>问卷描述</div>
          <el-input size="small" type="textarea" :row="2" v-model="surveyData.surDesc"></el-input>
        </div>
        <div class="mb-[10px] border-b-solid border-[#f4f4f4]  leading-[30px]">
          <div class="flex">结束反馈语 <IconMessageTip content="展示在点击提交按钮之后页面显示的文字内容"></IconMessageTip></div>
          <el-input size="small" type="textarea" :row="2" v-model="surveyData.surFinish"></el-input>
        </div>
        <div class="flex justify-between mb-[10px] border-b-solid border-[#f4f4f4]  leading-[30px]">
          <div>开始时间</div>
          <el-date-picker style="width:160px;"  value-format="YYYY-MM-DD HH:mm:ss"  size="small" type="datetime" v-model="surveyData.startTime"></el-date-picker>
        </div>
        <div class="flex justify-between mb-[10px] border-b-solid border-[#f4f4f4]  leading-[30px]">
          <div>结束时间</div>
          <el-date-picker  style="width:160px;" value-format="YYYY-MM-DD HH:mm:ss"  size="small"  type="datetime" v-model="surveyData.endTime"></el-date-picker>
        </div>
        <div class="mb-[10px] border-b-solid border-[#f4f4f4]  leading-[30px]">
          <span>备注</span>
          <el-input size="small" type="textarea" :row="2" v-model="surveyData.remark"></el-input>
        </div>
        <div class="flex justify-between border-b-solid border-[#f4f4f4] items-center leading-[40px]">
          <span>问卷类型</span>
          <el-select size="small" class="w-[120px]" v-model="surveyData.surType">
            <el-option  v-for="item in fed_survey_type" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </div>
        <div class="flex justify-between border-b-solid border-[#f4f4f4] items-center leading-[40px]">
          <div class="flex">
            <span>是否可重复进入：</span>
            <IconMessageTip content="截止时间之前提交之后是否可再次进入"></IconMessageTip>
          </div>
          <el-switch size="small" active-value="Y" inactive-value="N" v-model="surveyData.repeatJoin"></el-switch>
        </div>
        <div class="flex justify-between border-b-solid border-[#f4f4f4] items-center leading-[40px]">
          <span>是否作为模板</span>
          <el-switch size="small" active-value="Y" inactive-value="N" v-model="surveyData.isTemplate"></el-switch>
        </div>
        <div v-if="surveyData.isTemplate==='Y'" class="flex justify-between border-b-solid border-[#f4f4f4] items-center leading-[40px]">
          <span>模板名称</span>
          <el-input size="small" class="w-[120px]" v-model.trim="surveyData.tempName"></el-input>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="参与人员">
      <div class="flex justify-between border-b-solid border-[#f4f4f4] items-center leading-[44px]">
        <div class="flex">
          <span>是否公开：</span>
          <IconMessageTip content="公开则不需要登录即可填报"></IconMessageTip>
        </div>
        <el-switch active-value="Y" inactive-value="N" v-model="surveyData.isPublic"></el-switch>
      </div>
      <template v-if="surveyData.isPublic === 'N'">
        <div  class="flex justify-between border-b-solid border-[#f4f4f4] items-center leading-[44px]">
          <span>选择人员</span>
          <el-button @click="visible=true" type="primary" link size="small">点击选择</el-button>
        </div>
        <div class="leading-[40px]">人员列表</div>
        <el-empty description="暂未选择人员" v-if="surveyData.joinUserData?.length===0" :image-size="60">
          <template #description>
            <span>暂未选择人员</span>
          </template>
        </el-empty>
        <div v-for="(item,index) in surveyData.joinUserData" :key="item.studentId" class="flex justify-between  bg-[#f4f4f4] px-[15px] items-center leading-[34px]">
          <span>{{item.studentName}}</span>
          <span>{{item.className}}</span>
          <el-button type="danger" @click="delUser(index)" link size="small">删除</el-button>
        </div>
      </template>
    </el-tab-pane>
  </el-tabs>
  <CheckStudent v-model="visible"  @submit="handleChoseStudent" />
</template>
<style scoped lang="scss">
.flex-tabs{
  display: flex;
  flex-direction: column;
  height:100%;
  :deep(.el-tabs__content){
    flex:1;
    min-height: 0;
    box-sizing: border-box;
    overflow-y: scroll;
  }
}
</style>
